<template>
	<view>
		1111111
		<!-- 猜你喜欢 -->
		<view class="f-header m-t" v-if="hasHeader">
			<image src="../../static/images/index/h1.png"></image>
			<view class="tit-box">
				<text class="tit">猜你喜欢</text>
				<text class="tit2">Guess You Like It</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		
		<view class="guess-section">
			<view 
				v-for="(item, index) in dataList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.mainImage" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.name}}</text>
				<text class="price">￥{{item.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goodsList",
		props:{
			hasHeader:{
				type:Boolean,
				default:true
			},
			dataList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
			};
		},
		methods:{
			toLower(){
				console.log('已到了底部')
			},
			navToDetailPage(val){
				console.log(val)
				this.$tab.navigateTo(`/pages/product/product?product_id=${val.id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
.f-header{
	display:flex;
	align-items:center;
	height: 140upx;
	padding: 6upx 30upx 8upx;
	background: #fff;
	image{
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.tit-box{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit{
		font-size: 34upx;
		color: #font-color-dark;
		line-height: 1.3;
	}
	.tit2{
		font-size: 24rpx;
		color: #909399;
	}
	.icon-you{
		font-size: 34upx;
		color: #909399;
	}
}
/* 猜你喜欢 */
.guess-section{
	display:flex;
	flex-wrap:wrap;
	padding: 0 30upx;
	background: #fff;
	.guess-item{
		display:flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
	}
	.image-wrapper{
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title{
		font-size: 32upx;
		color: #303133;
		line-height: 60upx;
	}
	.price{
		font-size: 32upx;
		color: #fa436a;
		line-height: 1;
	}
}
</style>